<template>
	<div>
		<Header></Header>
		<Banner :swiperList='swiperList'></Banner>
		<Nav :navList='navList'></Nav>
		<Wei></Wei>
		<Tu></Tu>
		<Hot></Hot>
		<List :hotList='hotList'></List>
		<Like></Like>
		<Location :likeList='likeList'></Location>
		<Go :vacationList='vacationList'></Go>
		<Login></Login>
		<Foot></Foot>
	</div>
</template>
<script>
	import {mapState} from 'vuex'
	import Header from './pages/Header'
	import Banner from './pages/Banner'
	import Nav from './pages/Nav'
	import Wei from './pages/Wei'
	import Tu from './pages/Tu'
	import Hot from './pages/Hot'
	import List from './pages/List'
	import Like from './pages/Like'
	import Location from './pages/Location'
	import Go from './pages/Go'
	import Login from './pages/Login'
	import Foot from './pages/Foot'
	export default {
		name : 'home',
		data () {
		return {
			swiperList : '',
			navList:'',
			hotList:'',
			likeList:'',
			vacationList:'',
			cName:''
			}
		},
		components:{
			Header,
			Banner,
			Nav,
			Wei,
			Tu,
			Hot,
			List,
			Like,
			Location,
			Go,
			Login,
			Foot
		},
		computed:{
			...mapState(['cityName'])
		},
		methods:{
			getHttp(){
				this.$http.get("/api/dataHome.json").then((res)=>{
				let data = res.data.data;
				console.log(data)
					data.forEach((val,idx)=>{
						if(val.city==this.cityName){
							this.swiperList=val.swiperList;
							this.navList=val.iconsList;
							this.hotList=val.hotList;
							this.likeList=val.likeList;
							this.vacationList=val.vacationList;
						}
					})
				})
			}
		},
		mounted () {
			this.cName=this.cityName;
			this.getHttp();
		},
		activated(){
			if(this.cName!=this.cityName){
				this.getHttp();
				this.cName=this.cityName
			}
		}
	}
</script>